<template>
  <div class="facility_repair">
    <van-nav-bar title="设施报修" left-arrow @click-left="onClickLeft" fixed />
    <div class="repair_info">
      <van-field v-model="form.name" label="设备名称" readonly class="repair_input_box"/>
      <van-field v-model="form.address" label="所在位置" placeholder="请选择所在位置" clearable readonly clickable
        @click="showPicker = true" right-icon="arrow" required />
      <van-field v-model="form.addressDetail" label="所在位置" placeholder="请输入详细地址" clearable class="repair_input_box" required/>
      <div class="textarea_box">
        <textarea v-model="form.des" placeholder="请详细描述需要报修的内容" class="des_input_box" :maxlength="maxlength"></textarea>
        <span>{{currentLength}}/{{maxlength}}</span>
      </div>
      <div class="image_box">
        <p>添加图片</p>
        <van-uploader v-model="form.fileList" multiple :max-count="6"/>
      </div>
      <van-button class="pay_btn" @click="submit()" style="margin-top:30px;" :disabled="!disabled">提交</van-button>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
  import {
    notEmpty
  } from "../emptyTest"
  export default {
    name: 'propertyRepair',
    data() {
      return {
        form: {
          name: '',
          address: '',
          addressDetail: '',
          des: '',
          fileList: [{
              url: 'https://img.yzcdn.cn/vant/cat.jpeg'
            },
            {
              url: 'https://img.yzcdn.cn/vant/cat.jpeg'
            }
          ],
        },
        maxlength: 200,
        showPicker: false,
        columns: [{
            text: '禾盛京广中心',
            value: '111'
          },
          {
            text: '禾盛京广中心A座',
            value: '333'
          },
          {
            text: '禾盛京广中心B座',
            value: '444'
          },
          {
            text: '禾盛京广中心C座',
            value: '555'
          },
          {
            text: '禾盛京广中心D座',
            value: '666'
          },
          {
            text: '银河科技园',
            value: '222'
          }
        ]
      }
    },
    computed: {
      currentLength: function () {
        return this.form.des.length
      },
      disabled: function () {
        return notEmpty(this.form.address) && notEmpty(this.form.addressDetail) && this.form.fileList.length > 0
      }
    },
    mounted() {
      this.form.name = this.$route.query.val.name
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
      onConfirm(val) {
        this.showPicker = false
        this.form.address = val.text
      },
      submit() {
        this.$router.go(-1)
        this.$toast('提交成功')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../styles/workstation.scss';

  .facility_repair {
    background: #ffffff;
    height: 100%;

    .image_box {
      padding: 10px 15px;
      width: 100%;

      p {
        margin: 0 0 10.5px 0;
        line-height: 20px;
        font-size: 14px;
        color: #333333;
      }
    }

    .repair_info {
      display: flex;
      flex-wrap: wrap;
    }

    .textarea_box {
      width: 100%;
      position: relative;

      span {
        position: absolute;
        bottom: 25px;
        right: 25px;
        font-size: 12px;
        color: #999999
      }
    }

    .des_input_box {
      width: 325px;
      height: 130px;
      margin: 10px 15px;
      border-radius: 10px;
      border: none;
      background: #f5f7fa;
      padding: 15px 10px;
      font-size: 12px;
      line-height: 16.5px;
      color: #323233;
    }
  }
</style>

<style lang="scss">
  .facility_repair {
    .van-cell {
      font-size: 14px;
      line-height: 20px;
      padding: 10px 15px;
    }

    .van-cell:first-child {
      padding-top: 15px;
    }

    .van-field__control {
      text-align: right;
      font-size: 14px;
    }

    .repair_input_box {
      .van-field__control {
        margin-right: 24px;
      }
    }

    .image_box {
      .van-uploader__preview-image {
        width: 107px;
        height: 82px;

        .van-image__error,
        .van-image__img,
        .van-image__loading {
          border-radius: 5px;
        }
      }

      .van-uploader__upload {
        width: 107px;
        height: 82px;
        border-radius: 5px;
        border-style: solid;
      }

      .van-uploader__upload-icon {
        font-size: 25px;
      }
    }
  }
</style>